<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
      width="800px"
    >
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 10 }" :form="form">
        <a-form-item label="级别">
          <a-radio-group
            :options="typeOptions"
            disabled
            @change="(e) => (groupLevel = e.target.value)"
            v-decorator="[
              'groupLevel',
              {
                rules: [{ required: true, message: '请选择级别' }],
                initialValue: groupLevel,
              },
            ]"
          />
        </a-form-item>

        <a-form-item label="上级分组：" v-if="!!childModal">
          <!-- <a-input
            disabled
            v-decorator="[
              'parentGroupName',
              {
                rules: [{ required: true, message: '请输入1-6汉字的分类名称' }],
              },
            ]"
            placeholder="请输入1-6汉字的分类名称"
          /> -->

          <span>{{ records.parentGroupName }}</span>
        </a-form-item>

        <a-form-item label="一级分组名称：" v-if="!childModal">
          <a-input
            :maxLength="6"
            v-decorator="[
              'groupName',
              {
                rules: [{ required: true, message: '请输入1-6汉字的分类名称' }],
              },
            ]"
            placeholder="请输入1-6汉字的分类名称"
          />
        </a-form-item>

        <a-form-item label="二级分组名称：" v-else>
          <a-input
            :maxLength="15"
            v-decorator="[
              'groupName',
              {
                rules: [
                  { required: true, message: '请输入1-15汉字的分类名称' },
                ],
              },
            ]"
            placeholder="请输入1-6汉字的分类名称"
          />
        </a-form-item>

        <a-form-item label="分类图片" v-if="!!childModal">
          <upload-image
            @change="handleChange"
            v-decorator="['groupImg']"
          ></upload-image>
        </a-form-item>

        <a-form-item label="分组状态">
          <a-radio-group
            :options="groupStatusOptions"
            @change="(e) => (groupStatus = e.target.value)"
            v-decorator="[
              'groupStatus',
              {
                rules: [{ required: true, message: '请选择分组状态' }],
                initialValue: groupStatus,
              },
            ]"
          />
        </a-form-item>

        <a-form-item label="排序：">
          <a-input-number
            style="width: 100%"
            :precision="0"
            :min="0"
            v-decorator="['sort']"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      form: this.$form.createForm(this, { name: "coordinated" }),
      groupLevel: 1, // 级别 默认一级
      groupStatus: 1, // 分组状态  默认 显示
      typeOptions: [
        { label: "一级", value: 1 },
        { label: "二级", value: 2 },
      ],
      groupStatusOptions: [
        { label: "显示", value: 1 },
        { label: "隐藏", value: 0 },
      ],
    };
  },
  props: {
    value: {
      require: true,
      default: false,
      type: Boolean,
    },
    title: {
      default: "新增分类",
      type: String,
    },
    childModal: {
      default: false,
      type: Boolean,
    },
    records: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo || {},
    }),
  },
  mounted() {
    this.form = this.$form.createForm(this, { name: "coordinated" });
  },
  watch: {
    value(val) {
      console.log(val);
      this.visible = val;
    },
    visible(val) {
      if (val && JSON.stringify(this.records) != "{}") {
        this.$nextTick(() => {
          const formItems = this.form.getFieldsValue();
          console.log(formItems, "formItems");
          Object.keys(formItems).forEach((key) => {
            formItems[key] = this.records[key];
          });
          this.form.setFieldsValue(formItems);
        });
      }
      this.$emit("input", val);
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = "/goods/group/add";

          let parmas = {
            groupHot: 0,
            shopId: this.userInfo.shopId,
          };

          if (this.records.id) {
            url = "/goods/group/update";
            parmas.id = this.records.id;
          }
          // 如果true  说明添加、修改二级分组
          if (this.childModal) {
            parmas.parentId = this.records.parentId;
          } else {
            parmas.parentId = 0;
          }
          console.log(values);
          this.$post(url, { ...values, ...parmas }).then((res) => {
            if (res && res.returnCode === 1000) {
              this.$message.success("添加分组成功！");
              // this.closeModal();
              this.form.resetFields();
              this.visible = false;
              this.$emit("handleSubmit");
            }
          });
        }
      });
      this.confirmLoading = false;
    },

    handleCancel(e) {
      this.form.resetFields();
      this.visible = false;
    },
    handleChange(info) {
      this.fileList = [info];
    },
  },
};
</script>
